<template>
    <div class="basic-main">
      <div class="top">
        <Balance
          :title="`支付密码`"
          :show-column="false"
          :show-title="true"
          :show-date="false"
          :show-search="false"
        >
        </Balance>
      </div>
  
      <div class="info">
        <VeeForm
          :formData="formData"
          labelAlign="right"
          :schema="schema"
          :initialValues="{
            account_id: '12312312312312',
            nick_name:'12312312312',
            store_account: '17325764719',
          }"
        >
        <template #button="{validate,values}">
            <div class="button thumb" @click="()=>submit(validate,values)">
                 确认修改
            </div>
  
        </template>
        </VeeForm>
      </div>
    </div>
  
    <Confirm
      title="确定要账户注销吗"
      v-model:show="showConfirm"
      @confirm="loginOut"
    />
  </template>
  <script setup lang="ts" name="">
  import { ref } from "vue";
  import Balance from "@/components/Balance/index.vue";
  import Confirm from "@/components/Confirm/index.vue";
  import { GlobalStore } from "@/stores/index";
  import { useRouter } from "vue-router";
  import VeeForm from "@/components/VeeForm/index.vue";
  import { FormData } from "@/components/VeeForm/interface";
  import * as yup from "yup";
  import { toast } from "vue3-toastify";
  
  const globalStore = GlobalStore();
  
  const router = useRouter();
  
  const showConfirm = ref<boolean>(false);
  
  
  const schema = yup.object().shape({
    old_password: yup
      .string()
      .required("原密码不为空")
      .min(5, "至少为5个字符")
      .max(20, "最多为20个字符"),
    password: yup
      .string()
      .required("密码不为空")
      .min(5, "至少为5个字符")
      .max(20, "最多为20个字符"),
    confirm_password: yup
      .string()
      .required("确认密码不为空")
      .min(5, "至少为5个字符")
      .max(20, "最多为20个字符")
      .oneOf([yup.ref("password"), null], "密码不一致"),
  });
  
  

  const formData = ref<FormData>({
    old_password: {
      type: "input",
      label: "原密码:",
      placeholder:'请输入原密码',
      vBind:{type:'password'}
    },
    password: {
      type: "input",
      label: "密码修改:",
      placeholder:'请输入新密码',

      vBind:{type:'password'}
    },
    confirm_password: {
      type: "input",
      label: "确认密码:",
      placeholder:'确认新密码',

      vBind:{type:'password'}
  
    },
  });
  
  const loginOut = () => {
    globalStore.loginOut();
    router.push(`/home/index`);
  };
  
  const submit = async (validate:any,values:any)=>{
     const valid = (await validate()).valid;
     if(valid === false)  return toast.error(`信息填写错误`);
     console.log(values)
  }
  
  </script>
  <style scoped lang="scss">
  @media screen and (min-width: $pc-min-width) {
    @import "./pc.scss";
  }
  </style>
  